<template>
  <div id="main">

  </div>
</template>

<script>
  var echarts = require('echarts');

  // 基于准备好的dom，初始化echarts实例

  export default{
    name:"ec",
    methods:{
      echartsOption(){
        let imgSrc = `
        llBMVEUAAAAY258A1JYY258X2p4l2Zkd3qMY258Y3KAY258Y258X3J8V2p0Y2Z8Y26AW3Z0Y258Y2p4X258Y258X258Y258Y258Y3J8Y3J8Y258T2Z0Y
        258Y3J8Z26AY26AY258Y258X258X3J8Y3KAX3J8X3
        J8a36UY3J8Y26AX258X258Y258Y258Y258Y26AX3J8Y3
        J8Y258TXRF7AAAAMXRSTlMA3QSHmQYR62bM1iwiH0oWdxuv9OW1kTs0qA372SfSx1XvbU
        9BoQm8lVqMf1/3wplypN/JAQAAA+pJREFUaN7t2dl6ojAYBuAPFNxFcANRUXGry7S5/5ub+UNtaIk1iXAwT/u
        eeNDAR1ZCih/L3yWnGarltBljAaoVMlJxVfqM9JD3G/Ib8jND7E10nt0JGa6vd0L8SfQCda+MsbYnjbdpbbEh0Wkwxt6
        gasbI3IeOxYgusqBqH+unUAZdA2V1RqjFVFFbkQ2UOQHTqwvVg7xCgzOW1aXTnIxbljVvBbVLT1aPCWCU8jGSt7sGy7O
        OnY96GGWIFqshMx2zovH0vWwk2sqgLmdwYYvJjbNWsyNRD+2UI8i+FrPM+jBprlYvm3oyZJnhxuYpB8owSjnzG/SW7wn
        HMDfzt9H1vTK819wBnhFmo3N02UPI7rtmZOnjWVPeMNeabL30dll+F8/pNvhtQsj1eWXaLp7hzekmiXd/qvMCfxw84UC
        3OHx3C8+iIieY2/COdRUadGveWNTiDf/R8IupW2wYOrJ/Hr9Ra1SsCTP+leaa4k7fMux7esJYZQ6k7J8VTNgj1U8Re05
        j0Gyuq4+aDdXZNW0tC0pmMR8hBhLGWF2j7KtJl1zp6TRq3YKCXjS3blygq7Pp7dP7iyamddM+zmRPvmSCDWyzXzUdKuzR
        rxBJywlrACtaUpTnLV21AHpMiG1ZOYEG1UVn0+nQVSHtogXpEx6LIW3lUcJDKExoynuvdjN4b66R1ndAF3BqN+ep8oDR
        6hMP2jo65xvTwlDUaIEp1Fx4RxoYabyKJqZnRwGfUGqWfN9s4I1mpQMVXZO9hLgyhYoBzT0bJlq0bYOCPXXfDkaaqo2w
        EQNRm0MPuHzcCl5DVNms69kAj0RUrP/U0Wk8VWnVAMamfMlefF8mpkWuB3M1vvD73y1xa7GXNWQfHuzre/xj74inuNlHz
        v7bj6TAhqlOKB41gNQ+oT8m/BFSzySjYbnZ7/2BHIkvxsWw7RlkUDN8fP/GHRSlYljsl3Tao50hTlb68Z1Fv02Dlw9wO
        xBnSloZYkE60c0c+Qv6IiYkpRhkTHLbhGJ7rcQC74z1U5Yig6MJ15cubQkgUrQWfFdkiNCm9MUe4XPKSH2eN0QGx4++
        pJuAE3Ipeiv+6kojS9iJzJzDbf6I87tGCHV+ukDOq/RDKvl6RBv2XZibFLpU9FRpzrKDDZdWgrTkf2gcNs28Nz7OfZTG
        tphcgBJtYybT6KFM/QYrandQrtkmSFp5f3YvNv5P6ameV5uifDX21QvKZg8LIa3/MwSnQsgF5Vsd63mnLaqwd/McVGCR
        sE/iwEXpWuyrHcrmsII5StcuhEQoXWixzxIfFfC7eR6qMR0IC1Rky27oS7QqqXVbtkJUxw7T1WqVLvBT/QXZze13haQUPgAAAABJRU5ErkJggg==`
        // 数据初始化
        let fontColor = '#18DB9F';
          let   echartData = [{
                    name: "1分",
                    value: 100
                },
                {
                    name: "2分",
                    value: 200
                },
                {
                    name: "3分",
                    value: 200
                },
                {
                    name: "4分",
                    value: 100
                },
                {
                    name: "5分",
                    value: 100
                }
            ];
        // 数据整理
        let total = echartData.reduce((a, b) => {
            return a + b.value
        }, 0);

        // option
       let  option = {
            backgroundColor: '#FFFFFF',
            color: ['#06FDBC', '#F6FE05', '#07B0FE', '#FDB408', '#00DB1C', '#0188FE'],
            tooltip: {
                trigger: "item",
                formatter: "{b}: {c} ({d}%)"
            },
            graphic: {
                elements: [{
                    type: "image",
                    z: 3,
                    style: {
                        image: imgSrc,
                        width: 90,
                        height: 90
                    },
                    left: 'center',
                    top: "36%",
                    position: [100, 100]
                }]
            },
            title: {
                text: '评分总人数',
                top: '58%',
                textAlign: "center",
                left: "50%",
                textStyle: {
                    color: fontColor,
                    fontSize: 20,
                    fontWeight: '400'
                }
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ['1分', '2分', '3分', '4分', '5分'],

            },
            toolbox: {
                show: false
            },
            series: [{
                name: "",
                type: "pie",
                radius: [0, 150],
                center: ["50%", "50%"],
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(24,219,159,0.1)'
                    },
                },
                hoverAnimation: false,
                data: [""]
            }, {
                name: "",
                type: "pie",
                radius: [120, 135],
                selectedMode: 'single',
                center: ["50%", "50%"],
                label: {
                    normal: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(24,219,159,0.6)',
                         label: {
                            show: true,
                            position: 'outside',
                            formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < echartData.length; i++) {
                                    total += echartData[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(2);
                                if(params.name !== '') {
                                    return '分数：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%';
                                }else {
                                    return '';
                                }
                            },
                      },
                    }
                },
                hoverAnimation: false,
                hoverOffset: 5,
                data: echartData
            }, {
                name: "",
                type: "pie",
                radius: [0, 105],
                center: ["50%", "50%"],
                label: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.RadialGradient(.5, .5, .7, [{
                                offset: 0.5,
                                color: '#ffffff'
                            },
                            {
                                offset: 1,
                                color: '#18DB9F'
                            }
                        ], false)
                    },
                },
                hoverAnimation: false,
                data: [100]
            }]
        };
      var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption(option)
      }
    },
    mounted() {
        this.echartsOption()
    }
  }
</script>

<style scoped="scoped">
#main{
  width: 100%;
  height: 600px;
}
</style>
